<template>
  <div class="entry">
    <ul class="cards">
        <li>
          <div class="card-title">我的诊室</div>
          <div class="card-subtitle">查看我开的诊室信息</div>
          <div class="num">15</div>
          <Button type="primary" @click="go('/cloudVideo')">进入<Icon type="ios-arrow-round-forward" size="22" /></Button>
        </li>
        <li>
          <div class="card-title">我的预约</div>
          <div class="card-subtitle">查看我的预约信息</div>
          <div class="num">15</div>
          <Button type="primary" @click="go('/appointment')">进入<Icon type="ios-arrow-round-forward"  size="22"/></Button>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  methods: {
    go (url) {
      this.$router.push(url)
    }
  }
}
</script>

<style lang="less" scoped>
.entry {
}
.cards {
  margin: 0 auto;
  padding-top: 100px;
  width: 900px;
  // overflow: auto;
  >li {
    position: relative;
    background: #fff;
    float: left;
    margin-right: 40px;
    padding: 30px 40px 60px 30px;
    border-radius: 4px;
    width: 300px;
    .card-title {
      font-size: 1.8em;
    }
    .card-subtitle {
      color: #999;
    }
    .num {
      background: #24D3B2;
      color: #fff;
      padding: 8px 14px;
      border-radius: 4px;
      display: inline-block;
      font-size: 1.6em;
      margin-top: 10px;
    }
    button {
      position:absolute;
      bottom: -20px;
      right: 20px;
      width: 100px;
    }
  }
}
</style>
